<template>
  <view class="homePage">
    <swiper class="image-top" indicator-dots indicator-active-color="#ffffff" autoplay interval="5000"
      style="height: 60vw;flex-shrink:0">
      <swiper-item v-for="(item, index) in swiperData" :key="item.id">
        <image :src="item.url.trim()" class="img" mode="aspectFill" style="width: 100%; height: 100%;" />
      </swiper-item>
      <!-- 当没有数据时显示默认图片 -->
      <swiper-item v-if="swiperData.length === 0">
        <image src="http://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/tops.png" class="img" mode="aspectFill"
          style="width: 100%; height: 100%;" />
      </swiper-item>
    </swiper>
    <view class="main">
      <!-- 用户信息区域 - 完全复制用户中心 -->
      <!-- <view class="top">
        <view class="left">
          <view class="info">
            <view class="info-right">
              <view class="name">{{ userInfo.real_name }}</view>
              <view class="company">{{ userInfo.company }}</view>
            </view>
          </view>
        </view>
        <view class="right">
          {{ greetingText }}
        </view>
      </view> -->

      <!-- 功能入口 - 完全匹配用户中心设置列表样式 -->
      <view class="menuBox">
        <div class="box column">
          <div class="welcome">
            <view class="left">
              <view class="info">
                <view class="info-right">
                  <view class="name">Hey,{{ userInfo.real_name || userInfo.username }}</view>
                </view>
              </view>
            </view>
            <view class="right">
              {{ greetingText }}
            </view>
          </div>
          <view class="settingList large">
            <view class="item" @click="navTo('pages/order/list')">
              <view class="iconBox">
                <s-icon :huise="version == '1' ? true : false"
                  name="http://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/icons/order.png" class="icon" size="100"
                  sizesuo="60" />
              </view>
            </view>
            <view class="item" @click="gourl('/pages/extra/stats/index')">
              <view class="iconBox">
                <s-icon :huise="version == '1' ? true : false"
                  name="http://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/icons/money.png" class="icon" size="100"
                  sizesuo="60" color="var(--v-linear)" />
              </view>
            </view>
            <view class="item" @click="showTeamTip">
              <view class="iconBox">
                <s-icon :huise="version == '1' ? true : false"
                  name="http://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/icons/albumn.png" class="icon" sizesuo="60"
                  size="100" />
              </view>
            </view>
          </view>
          <view class="settingList small">
            <view class="item">
              <view class="iconBox">
                <s-icon :huise="version == '1' ? true : false"
                  name="http://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/icons/sucai.png" class="icon" size="36"
                  sizesuo="36" />
              </view>
              <view class="label">素材列表</view>
            </view>
            <view class="item" @click="navTo('pages/quest/index')">
              <view class="iconBox">
                <s-icon :huise="version == '1' ? true : false"
                  name="http://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/icons/wenjuan.png" class="icon"
                  sizesuo="36" size="36" />
              </view>
              <view class="label">拍摄问卷</view>
            </view>
            <view class="item" @click="showTeamTip">
              <view class="iconBox">
                <s-icon :huise="version != '4' ? true : false"
                  name="http://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/icons/contract.png" class="icon"
                  sizesuo="36" size="36" />
              </view>
              <view class="label">电子合同</view>
            </view>
            <view class="item" @click="showTeamTip">
              <view class="iconBox">
                <s-icon :huise="version != '4' ? true : false"
                  name="http://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/icons/cashier.png" class="icon"
                  sizesuo="36" size="36" />
              </view>
              <view class="label">收银台</view>
            </view>
            <view class="item" @click="showTeamTip">
              <view class="iconBox">
                <s-icon :huise="version != '4' ? true : false"
                  name="http://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/icons/customer.png" class="icon"
                  sizesuo="36" size="36" />
              </view>
              <view class="label">客户管理</view>
            </view>
          </view>
        </div>
      </view>


      <!-- 工作计划 - 使用用户中心常用工具样式 -->
      <view class="menuBox">
        <div class="box">
          <!-- 今日数据 - 使用用户中心月度统计相同样式 -->
          <view class="month-stats">
            <view class="month-name"> 今日实时数据 </view>
            <view class="list">
              <view class="item">
                <view class="value">
                  <view class="text">{{ today_stats.order_count || 0 }}</view>
                  <view class="unit">单</view>
                </view>
                <view class="label">订单数</view>
              </view>
              <view class="item">
                <view class="value">
                  <view class="text">{{ today_stats.total_amount || 0 }}</view>
                  <view class="unit">元</view>
                </view>
                <view class="label">营业额</view>
              </view>
              <view class="item">
                <view class="value">
                  <view class="text">{{ today_stats.total_deposit || 0 }}</view>
                  <view class="unit">元</view>
                </view>
                <view class="label">实收金额</view>
              </view>
            </view>
          </view>
          <view class="seprate" style="margin-top: 20rpx;"></view>
          <view class="title">
            <view class="text"> 工作计划 </view>
          </view>
          <view class="menuList">
            <view class="item">
              <view class="iconBox">
                <image style="width:100%;height: 100%" mode="widthFix"
                  src="https://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/iconrili.png" />
              </view>
              <view class="label">今天</view>
              <view class="count">{{ task_stats.today || 0 }}单</view>
            </view>
            <view class="item">
              <view class="iconBox">
                <image style="width:100%;height: 100%" mode="widthFix"
                  src="https://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/iconrili.png" />
              </view>
              <view class="label">明天</view>
              <view class="count">{{ task_stats.tomorrow || 0 }}单</view>
            </view>
            <view class="item">
              <view class="iconBox">
                <image style="width:100%;height: 100%" mode="widthFix"
                  src="https://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/iconrili.png" />
              </view>
              <view class="label">后天</view>
              <view class="count">{{ task_stats.day_after_tomorrow || 0 }}单</view>
            </view>
          </view>
        </div>
      </view>
    </view>
    <v-tabbar ref="tabbar" @tabBarChange="tabBarChange" :tabIndex="0" :version="version" />
  </view>
</template>

<script>
import sIcon from '@/uni_modules/s-ui/components/s-icon/s-icon.vue'

export default {
  components: {
    sIcon
  },
  data() {
    return {
      version: "",
      userInfo: {
        real_name: "",
        company: "",
      },
      greetingText: "",
      today_stats: {},
      task_stats: {},
      swiperData: [] // 用于存储轮播数据
    };
  },
  onShow() {
    if (uni.getStorageSync('version')) {
      this.version = uni.getStorageSync('version')
    }
    uni.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    });

    this.setGreeting();
    this.getIndexData();
    this.getIndexSwiper();
  },
  methods: {
    setGreeting() {
      const hour = new Date().getHours();
      if (hour >= 5 && hour < 9) {
        this.greetingText = "🌅早上好，今天也要元气满满";
      } else if (hour >= 9 && hour < 12) {
        this.greetingText = "☀️上午好，工作顺利吗";
      } else if (hour >= 12 && hour < 14) {
        this.greetingText = "🍮中午好，记得午休哦";
      } else if (hour >= 14 && hour < 18) {
        this.greetingText = "🍮下午好，继续加油";
      } else if (hour >= 18 && hour < 22) {
        this.greetingText = "🌙晚上好，今天辛苦了";
      } else {
        this.greetingText = "🌠夜深了，注意休息";
      }
    },
    gourl(url) {
      uni.navigateTo({
        url: url
      });
    },
    navTo(url) {
      console.log(this.version)
      if (this.version == 1) {
        uni.showToast({
          title: "此功能需团队版",
          icon: "none",
        });
        return
      }
      this.showTeamTip()
      this.sjuNav.navigateTo(url);
    },
    tabBarChange(url) {
      uni.switchTab({ url });
    },
    showTeamTip() {
      if (this.version == 1) {
        uni.showToast({
          title: "此功能需团队版",
          icon: "none",
        });
        return
      }
    },
    getIndexData() {
      this.sjuAjax.get("/user/indexData", {}, (res) => {
        if (res && res.code == 200) {
          console.log('首页用户数据:', res.data);
          this.userInfo = res.data.user_info || { real_name: '用户', company: '' };
          this.today_stats = res.data.today_stats || {};
          this.task_stats = res.data.task_stats || {};
        } else {
          console.error('获取首页数据失败:', res);
          this.userInfo = { real_name: '用户', company: '' };
        }
      }).catch(err => {
        console.error('首页数据请求异常:', err);
        this.userInfo = { real_name: '用户', company: '' };
      });
    },
    getIndexSwiper() {
      this.sjuAjax.get("/setting/getAll", {}, (res) => {
        if (res && res.code == 200) {
          console.log(res.data);
          // 存储swipper数据
          if (res.data && res.data.swipper) {
            this.swiperData = res.data.swipper;
          }
        }
      });
    },
  },
};
</script>
<style lang="scss">
.homePage {
  width: 100vw;
  height: 100vh;
  background-size: 100% auto;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.main-scroll {
  height: 0;
  flex-grow: 1;
}

.main {
  padding: 0 30rpx;
  display: flex;
  flex-direction: column;
  position: relative;
  transform: translateY(-80rpx);

  >* {
    margin-bottom: 40rpx;

    /* 替换 gap: 40rpx */
    &:last-child {
      margin-bottom: 0;
      /* 最后一个元素没有 margin */
    }
  }
}

/* 顶部区域 - 完全复制用户中心 */
.top {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: space-between;
  padding: 0 10rpx;

  .info {
    display: flex;
    align-items: center;

    .avatar {
      margin-right: 30rpx;
      /* 替换 gap: 30rpx */
    }

    .avatar {
      width: 90rpx;
      height: 90rpx;
      background: var(--v-theme);
      color: #fff;
      border: #fff 4rpx solid;
      border-radius: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40rpx;
      text-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.4);
      box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
      flex-shrink: 0;

      .nameTxt {
        line-height: 1;
      }
    }

    .info-right {
      display: flex;
      flex-direction: column;

      .name {
        margin-bottom: 10rpx;
        /* 替换 gap: 10rpx */
        font-size: 38rpx;
        letter-spacing: 4rpx;
        color: var(--v-third);
        line-height: 1.2;
        font-weight: bold;
      }

      .company {
        font-size: 24rpx;
        color: var(--v-third);
      }
    }
  }

  .right {
    color: var(--v-gray);

    .button {
      background: var(--v-linear);
      color: #fff;
      font-size: 24rpx;
      font-weight: bold;
      padding: 10rpx 20rpx;
      border-radius: 10rpx;
      display: flex;
      align-items: center;

      >* {
        margin-right: 10rpx;

        /* 替换 gap: 10rpx */
        &:last-child {
          margin-right: 0;
          /* 最后一个元素没有 margin */
        }
      }
    }
  }
}

/* 月度统计 - 完全复制用户中心 */
.month-stats {
  padding: 20rpx 0;

  .month-name {
    margin-bottom: 20rpx;
    font-size: 28rpx;
    text-align: center;
    font-weight: bold;
  }

  .list {
    display: flex;

    >.item {
      margin-right: 28rpx;

      /* 替换 gap: 28rpx */
      &:last-child {
        margin-right: 0;
        /* 最后一个元素没有 margin */
      }
    }

    .item {
      flex-grow: 1;

      .value {
        display: flex;
        align-items: baseline;
        justify-content: center;

        .text {
          margin-right: 8rpx;
          /* 替换 gap: 8rpx */
        }

        .text {
          font-size: 50rpx;
          color: var(--v-theme);
        }

        .unit {
          color: var(--v-gray);
        }
      }

      .label {
        text-align: center;
        color: var(--v-gray);
        font-size: 24rpx;
      }
    }
  }
}

.image-top {
  .img {
    width: 100%;
  }
}

/* 菜单盒子 - 完全复制用户中心 */
.menuBox {
  display: flex;
  flex-direction: column;

  >.box {
    margin-bottom: 40rpx;

    /* 替换 gap: 40rpx */
    &:last-child {
      margin-bottom: 0;
      /* 最后一个元素没有 margin */
    }
  }

  .box {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 20rpx;
    box-shadow: var(--v-shadow);
    display: flex;
    flex-direction: column;
    padding: 20rpx 0;

    >* {
      margin-bottom: 10rpx;

      /* 替换 gap: 10rpx */
      &:last-child {
        margin-bottom: 0;
        /* 最后一个元素没有 margin */
      }
    }

    &.column {
      flex-direction: column;
      padding-top: 0;
      overflow: hidden;
    }

    .welcome {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #2e2f34;
      color: #c8b276;
      padding: 20rpx;
      font-size: 24rpx;
    }

    .title {
      font-size: 28rpx;
      font-weight: bold;
      padding: 24rpx;

      .text {
        line-height: 1em;
        padding-left: 24rpx;
        border-left: var(--v-theme) 8rpx solid;
      }
    }

    .settingList {
      display: flex;
      padding: 28rpx;
      flex-wrap: wrap;
      justify-content: space-between;

      .item {
        width: calc(20% - 21rpx);
        /* 调整宽度计算 */
        display: flex;
        flex-direction: column;
        align-items: center;

        .iconBox {
          margin-bottom: 10rpx;
          /* 替换 gap: 10rpx */
        }

        .iconBox {
          font-size: 46rpx;
          color: var(--v-theme);
        }

        .label {
          color: var(--v-gray);
          font-size: 24rpx;
        }

        &.disabled {
          opacity: 0.5;
        }
      }

      &.large {
        justify-content: center;
        gap: 40rpx;
        padding-bottom: 0;

        .item {
          width: 180rpx;
        }
      }
    }

    .seprate {
      width: 100%;
      height: 1px;
      background: #eee;
    }

    .menuList {
      width: 100%;

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx;

        .iconBox {
          margin-right: 20rpx;
          /* 替换 gap: 20rpx */
        }

        .iconBox {
          width: 55rpx;
          height: 55rpx;
          color: #fff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 26rpx;
        }

        .label {
          flex-grow: 1;
          font-size: 30rpx;
          color: #333;
        }

        .count {
          font-size: 30rpx;
          color: var(--v-third);
        }
      }
    }
  }
}
</style>